<template>
  <dialog ref="$dialog">
    <slot />
  </dialog>
</template>
<script setup>
import { onMounted, ref } from 'vue';
const $dialog = ref();
onMounted(() => {
  const { value: dialog } = $dialog;
  const { parentElement: parent } = dialog;
  parent.style.position = 'relative';
  parent.addEventListener('mouseenter', () => {
    dialog.style.left = 0;
    dialog.style.top = parent.offsetHeight + 5 + 'px';
    dialog.show();
  });
  parent.addEventListener('mouseleave', () => {
    dialog.close()
  });
});
</script>
<style scoped>
dialog {
  margin: 0;
  font-size: initial;
  font-weight: initial;
  padding: 5px 10px;
  border: 1px solid gray;
  outline: none;
  border-radius: 4px;
  background-color: #fea;
}
</style>